<template>
  <div style="display: flex;justify-content: center">
    <h1>销售出库</h1>
  </div>

  <div style="display: flex ;justify-content: space-around;margin-top: 20px;

">
    <div>
      客户：
      <el-select v-model="clientId" placeholder="请选择" size="large">
        <el-option v-for="c in client" :key="c.id" :label="c.name" :value="c.id"></el-option>
      </el-select>
    </div>
    <div>
      销售员：{{ loginUser.realName }}
    </div>
    <div>
      订单总额：{{ totalPrice }}
    </div>
  </div>
  <div style="margin-left: 120px;margin-top: 50px">
    送货地址：
    <el-input v-model="address" style="width: 250px;"/>
  </div>
  <div style="margin-top: 20px">
    出库物品：
    <el-table :data="sellList" style="width: 100%;height: 200px">
      <el-table-column prop="product.name" label="商品名称"/>
      <el-table-column prop="product.brand" label="品牌"/>
      <el-table-column prop="product.sellPrice" label="建议销售价"/>
      <el-table-column prop="num" label="出库数量">
        <template #default="scope">
          <el-input v-model="scope.row.num" @blur="update(scope.row)" style=" width: 70px"/>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="移除商品" width="220">
        <template #default="scope">
          <el-button type="danger" @click="del(scope.row)">移除商品</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="display: flex ;justify-content: space-around;margin-top: 40px">
    <div>
      <el-button type="success" @click="add()">添加商品</el-button>
    </div>
    <div>
      <el-button type="success" @click="addHouse()">出库</el-button>
    </div>
  </div>
  <!--  添加商品弹出框-->
  <el-dialog
      v-model="addVisible"
      title="添加出库商品"
      width="800px"
  >
    <el-form
        label-width="120px"
        class="demo-ruleForm"
        status-icon
        style="width: 760px;"
    >
      <div>
        <div>
          <el-table :data="cutObj.records" style="width: 100%">
            <el-table-column prop="name" label="商品名称"/>
            <el-table-column prop="brand" label="品牌"/>
            <el-table-column prop="sellPrice" label="建议销售价"/>
            <el-table-column fixed="right" label="添加" width="220">
              <template #default="scope">
                <el-button type="success" @click="addSellCar(scope.row.id)">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              v-model:currentPage="cutObj.current"
              v-model:page-size="cutObj.size"
              background
              layout="prev, pager, next, jumper"
              :total="cutObj.total"
              @current-change="findByItem"
          />
        </div>

        <div>
          <div style="margin-top: 20px;margin-left: 200px">
            <div style="width: 300px;">商品名称:
              <el-input v-model="findObj.name" style="width: 220px;margin-left: 10px"/>
            </div>
            <div>类别：
              <el-select v-model="findObj.type" placeholder="请选择" size="middle" style="margin-left: 27px">
                <el-option label="所有" value=""></el-option>
                <el-option label="电脑产品" value="电脑产品"></el-option>
                <el-option label="电脑配件" value="电脑配件"></el-option>
              </el-select>
            </div>
            <div>
              <el-button type="primary" @click="findByItem(1)">查询</el-button>
            </div>
          </div>

        </div>
      </div>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取消</el-button>
        </span>
    </template>
  </el-dialog>


</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      loginUser: {},
      loginUserId: "",
      client: [],
      addVisible: false,
      clientId: "",
      sellList: [],
      delObj: "",
      cutObj: {},
      findObj: {},
      totalPrice: "",
      address: ""
    }
  },
  methods: {
    async getLoginUser() {
      await axios.get("/project/user/getLoginUser").then(resp => {
        this.loginUser = resp.data;
      })
      this.findList();
    },
    findAllClientName() {
      axios.get("/project/client/findAll").then(resp => {
        this.client = resp.data
      })
    },
    async findList() {
      await axios.get("/project/sellCar/findByUserId", {
        params: {
          userId: this.loginUser.id
        }
      }).then(resp => {
        this.sellList = resp.data;
      })
      this.getPrice();
    },
    getPrice() {
      axios.get("/project/sellCar/getTotalPrice", {
        params: {
          userId: this.loginUser.id
        }
      }).then(resp => {
        this.totalPrice = resp.data;
      })
    },
    del(obj) {
      this.delObj = obj;
      axios.get("/project/sellCar/del", {
        params: {
          sellCarId: this.delObj.id
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.findList();
        }
      })
    },
    update(obj) {
      axios.get("/project/sellCar/update", {
        params: {
          sellCarId: obj.id,
          num: obj.num
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.getPrice()
          alert("修改成功")
        }
      })
    },
    add() {
      this.addVisible = true;
      this.findByItem(1);
    },
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      this.findObj.info = "定义销售价";
      axios.get("/project/product/findByItem", {
        params: this.findObj
      }).then(resp => {
        this.cutObj = resp.data;
      })
    },
    addSellCar(id) {
      alert(id+"productId")
      alert(this.loginUser.id+"userId")
      axios.get("/project/sellCar/add", {
        params: {
          productId: id,
          userId: this.loginUser.id
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.addVisible = false;
          alert("添加成功")
          this.findList();

        }
      })
    },
    addHouse() {
      axios.get("/project/sell/add", {
        params: {
          user: this.loginUser.realName,
          address: this.address,
          totalPrice: this.totalPrice,
          clientId: this.clientId,
          userId: this.loginUser.id
        }
      }).then(resp => {
        if (this.address = null || this.address == "") {
          alert("请输入地址");
          return;
        }
        if (this.clientId = null || this.clientId == "") {
          alert("请选择客户");
          return;
        }
        if (resp.data == "ok") {
          alert("添加成功");
          this.findList();
          this.clientId = "";
          this.address = "";
        }
      })
    }
  },
  created() {
    this.getLoginUser();
    this.findAllClientName();

  }
}
</script>

<style scoped>

</style>